<template>
  <div class="admin">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">新增手机</div></el-col
        >
      </el-row>

      <el-form-item label="手机名称">
        <el-input v-model="form.phone_name"></el-input>
      </el-form-item>
      <el-form-item label="手机品牌">
        <el-input v-model="form.brand"></el-input>
      </el-form-item>
      <el-form-item label="充电功率">
        <el-input v-model="form.charging_power"></el-input>
      </el-form-item>
      <el-form-item label="处理器">
        <el-input v-model="form.soc"></el-input>
      </el-form-item>

      <el-form-item label="手机价格">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="手机尺寸">
        <el-input v-model="form.screen_size"></el-input>
      </el-form-item>
      <el-form-item label="电池容量">
        <el-input v-model="form.battery"></el-input>
      </el-form-item>
      <el-form-item label="手机重量">
        <el-input v-model="form.weight"></el-input>
      </el-form-item>
      <el-form-item label="手机厚度">
        <el-input v-model="form.thick"></el-input>
      </el-form-item>
      <el-form-item label="手机宽度">
        <el-input v-model="form.width"></el-input>
      </el-form-item>
      <el-form-item label="上市时间">
        <el-input v-model="form.marketedTime"></el-input>
      </el-form-item>
      <el-form-item label="游戏帧率">
        <el-input v-model="form.frame_rate"></el-input>
      </el-form-item>
      <el-form-item label="跑分情况">
        <el-input v-model="form.points"></el-input>
      </el-form-item>
      <el-form-item label="手机图片">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/api/brand/addPhonePic"
          name="phone-pic"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 底部的提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即新增新的手机</el-button>
        <el-button @click="resetVal">重置</el-button>
      </el-form-item>

      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">删除过久的手机</div></el-col
        >
      </el-row>

      <el-form-item label="手机型号">
        <el-input v-model="phone_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="deletePhone"
          >删除下面输入的手机</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "administrator",
  data() {
    return {
      imageUrl: "",
      phone_name: "",
      form: {
        phone_name: "",
        soc: "",
        price: 0,
        brand: "",
        screen_size: "",
        battery: "",
        weight: "",
        charging_power: "",
        phone_pic: "",
        width: "",
        points: "",
        frame_rate: "",
        thick: "",
      },
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.phone_pic = file.name;

      this.$message({
        type: "success",
        message: "图片上传成功!",
      });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    async onSubmit() {
      await axios({
        method: "post",
        url: "http://localhost:8081/api/brand/addPhone",
        data: {
          form: {
            ...this.form,
            price: Number(this.form.price),
            screen_size: Number(this.form.screen_size),
            battery: Number(this.form.battery),
            weight: Number(this.form.weight),
            charging_power: Number(this.form.charging_power),
            points: Number(this.form.points),
            frame_rate: Number(this.form.frame_rate),
            width: Number(this.form.width),
            thick: Number(this.form.thick),
          },
        },
      }).then(() => {
        this.$message({
          type: "success",
          message: "手机资料上传成功!",
        });
      });
    },
    resetVal() {
      this.imageUrl = "";
      this.form = {
        phone_name: "",
        soc: "",
        price: 0,
        brand: "",
        screen_size: "",
        battery: "",
        weight: "",
        charging_power: "",
        phone_pic: "",
        width: "",
        points: "",
        frame_rate: "",
        thick: "",
      };
    },
    async deletePhone() {
      await axios({
        method: "post",
        url: "http://localhost:8081/api/brand/delPhone",
        data: {
          phone_name: this.phone_name,
        },
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "手机资料删除成功!",
          });
        })
        .catch(() => {
          this.$message.error({
            message: "手机资料删除失败!",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.admin {
  .el-form {
    margin: 2rem auto;
    width: 70%;

    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #adcfff;
      // background: #e5d8f8;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
      text-align: center;
      line-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
